<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的课程</title>
<link rel="stylesheet" href="${BasePath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${BasePath}/css/bootstrap-pager.css">
<link rel="stylesheet" href="${BasePath}/css/common.css?v=${cssVersion}">
<style>
.table tbody tr td{
    vertical-align: middle;
}
span{
margin:0 50px 0 0;
font-size: 14px;
}
.black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=88); 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 55%; 
    height: 55%; 
    padding: 20px; 
    border: 4px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
}
#btnUploadCourse{
	vertical-align: middle;
}
.table td img{
    width: 80px;
    height: 80px;
    display:block;
    margin:0 auto;
}
</style>
</head>
<body>
	<#include 'navTeacher.html'>
	<div class="panel panel-default" style="width: 96%; margin:10px auto;">
		<div class="panel-body">
		    <div class="panel">
		    <#if memberEntity??>
		        <div class="panel-body row">
			    <div class="form-group col-lg-3">
				    <label>昵称</label>&nbsp;&nbsp;${memberEntity.nickName}
				</div>
			    <div class="form-group col-lg-3">
				    <label>电话</label>&nbsp;&nbsp;${memberEntity.mobile}
				</div>
				<div class="form-group col-lg-3">
				    <label>课程总数</label>&nbsp;&nbsp;${total}
				</div>
				<div class="form-group col-lg-3">
				    <button class="btn btn-primary" id="btnUploadCourse">上传课程</button>
				</div>
				</div>
			</#if>
			</div>
			<table class="table table-bordered table-hover table-condensed">
				<thead>
					<tr>
						<th>课程封面</th>
						<th>课程标题</th>
						<th>课程简介</th>
						<th>课程详情</th>
						<th>点击量</th>
						<th>创建时间</th>
						<th>审核状态</th>
						<th>课程编辑</th>
						<th>课程试听</th>
					</tr>
				</thead>
				<tbody>
				    <#if courses?exists>
				    <#list courses as c>
					<tr>
						<td>
							<image src="${(c.faceImgPath)!''}" class=""/>
						</td>
						<td>${(c.title)!'无'}</td>
						<td>
							<button descr="${(c.descr)!'无'}" class="courseDescr btn btn-info">查看</button>
						</td>
						<td>
							<button content="${(c.content)!''}" class="editContent btn btn-warning" cid="${c.id}" id="editContent${c.id}">编辑内容</button>
						</td>
						<td>${(c.clickNum)!0}</td>
						<td>${c.createTime?number_to_datetime!''}</td>
						<#if c.auditStatus == 1>
							<td id="auditStatus${c.id}">审核通过</td>
						<#elseif c.auditStatus == 2>
							<td id="auditStatus${c.id}">审核不通过</td>
						<#else>
							<td id="auditStatus${c.id}">未审核</td>
						</#if>
						<td>
							<button class="courseEdit btn btn-warning" cid="${c.id}">编辑</button>
						</td>
						<td>
							<audio src="${c.radioLink}" controls="controls">
							</audio>
						</td>
					</tr>
					</#list>
				    </#if>
				</tbody>
			</table>
			<div id="page-container-static-big" style="text-align: center;">
				<ul id="pageLimit"></ul>
			</div>
		</div>
	    
	</div>
	
	<div id="light" class="white_content" align="center">
		<div id="msg" style="width:80%;margin:0 40px 40px 40px;font-size:16px;"></div>
		<button class="btn btn-info" onclick = "closeDialog()" style="position:relative;">关闭</button>
	</div>
	<div id="fade" class="black_overlay"></div>
	
	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	    <div class="modal-dialog modal-lg">
	        <div class="modal-content">
	            <div class="modal-header">
	                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
	                <h4 class="modal-title">课程内容</h4>
	            </div>
	            <input type="hidden" id="modalCid">
	            <div class="modal-body">
	            	<textarea id="contentText" rows="12" class="form-control"></textarea>
	            </div>
	            <div class="modal-footer">
	                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	                <button type="button" class="btn btn-primary" id="saveContent">保存修改</button>
	            </div>
	        </div>
	    </div>
	</div>
	<script type="text/javascript" src="${BasePath}/js/jquery-3.3.1.min.js"></script>  
	<script type="text/javascript" src="${BasePath}/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="${BasePath}/js/bootstrap-pager.js"></script>
	<script type="text/javascript" src="${BasePath}/js/common-func.js?v=${jsVersion}"></script>
	<script type="text/javascript" src="${BasePath}/js/teacherAjaxHeader.js?v=${jsVersion}"></script>
	<script>
	//禁用返回
    window.history.pushState(null, null, "#");
	window.addEventListener("popstate", function(e) {
		window.history.pushState(null, null, "#");
	});
	
	$("#btnUploadCourse").click(function(){
		location.href = "${BasePath}/page/teacher/uploadCourse";
	});
	
	var pageSize = 10;
	$('#pageLimit').bootstrapPaginator({
		currentPage: 1,
		totalPages: ${totalPages},
		size:"big",
		bootstrapMajorVersion: 3,
		alignment:"right",
		numberOfPages: pageSize,
		itemTexts: function (type, page, current) {
			switch (type) {
			case "first": return "首页";
			case "prev": return "上一页";
			case "next": return "下一页";
			case "last": return "末页";
			case "page": return page;
			}//默认显示的是第一页。
		},
		//给每个页眉绑定一个事件，其实就是ajax请求，其中page变量为当前点击的页上的数字。
		onPageClicked: function (event, originalEvent, type, page){
			var courseRequest = {
				memberId: '${memberEntity.id}',
				pageNum: page, 
				pageSize: pageSize 
			};
			var req = {requestData: JSON.stringify(courseRequest)};
			$.ajax({
				url: "${BasePath}/api/course/teacher",
				type:'POST',
				contentType : "application/json; charset=utf-8",
				data: JSON.stringify(req),
				dataType:'json',
				success:function (data) {
					
					if(data == null){
						alert("没有数据")
						return;
					}
					
					var courses = JSON.parse(data.responseData);
					console.log(courses)
					if(courses != null){
						var tDoms = '';
						for(var i=0; i<courses.length; i++){
						    var c = courses[i];//获取LIST里面的对象
						    tDoms += getCourseDom(c);
						}
						
						$('tbody').html(tDoms);
						
						regAuditEvents();
					}
				}
			});
		}
	});
	
	function openDialog(){
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block'
    }
    function closeDialog(){
        document.getElementById('light').style.display='none';
        document.getElementById('fade').style.display='none'
    }
    
    function showMsg(msg){
  		$("#msg").html(msg);
  		openDialog();
  	}
    
	$(document).ready(function(){
		$('#myModal').modal('hide');
		regAuditEvents();
	});
	
	function regAuditEvents(){
		
		$(".courseDescr").click(function(){
			var descr = $(this).attr("descr");
			showMsg(descr);
		});
		
		$(".courseContent").click(function(){
			var content = $(this).attr("content");
			showMsg(content);
		});
		
		$(".editContent").click(function(){
			var content = $(this).attr("content");
			var cid = $(this).attr("cid");
			
			$('#modalCid').val(cid);
			$('#contentText').val(content);
			$('#myModal').modal('show');
		});
		
		$(".courseEdit").click(function(){
			var courseId = $(this).attr("cid");
			window.open("${BasePath}/page/teacher/courseEdit?memberId=${memberEntity.id}&courseId=" + courseId);
		});
	}
	
	$("#saveContent").click(function(){
		var cid = $("#modalCid").val();
		var content = $("#contentText").val();
		var ret = updateCourseContent(cid, content);
		if(ret){
			$("#editContent" + cid).attr("content", content);
			alert("修改成功");
		}
		else{
			alert("修改失败")
		}
		$('#myModal').modal('hide');
	});
	
	function updateCourseContent(cid, content){
		var courseRequest = {
			courseId: cid,
			content: content
		};
		var req = {requestData: JSON.stringify(courseRequest)};
		var ret = false;
		$.ajax({
			url: "${BasePath}/api/course/content_upd",
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			async: false,
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null){
					console.log("没有数据");
					return;
				}
				ret = Boolean(data.responseData);
			}
		});
		return ret;
	}
	
	//教师审核
	function courseAudit(cid, pass){
		if(cid == null || pass == null){
			console.log("param invalid");
			return false;
		}
		var courseRequest = {
			courseId: cid,
			auditStatus: (pass ? 1 : 2)
		};

		var req = {requestData: JSON.stringify(courseRequest)};
		var ret = false;
		$.ajax({
			url: "${BasePath}/api/course/audit",
			type:'POST',
			contentType : "application/json; charset=utf-8",
			data: JSON.stringify(req),
			dataType:'json',
			success:function (data) {
				console.log("data=" + JSON.stringify(data));
				if(data == null){
					console.log("没有数据");
					return;
				}
				ret = Boolean(data.responseData);
			}
		});
		return ret;
	}
	
	function getCourseDom(c){
		var tDom = '';
		tDom += '<tr>\r\n';
		if(c.faceImgPath==null)c.faceImgPath='';
		tDom+='<td>'+
			'<image src="'+c.faceImgPath+'" class=""/>'+
				'</td>';
		tDom += '<td>' + c.title + '</td>\r\n';
		
	    if(c.descr == null) c.descr = '';
		tDom += '<td><button descr=\"' + c.descr + '\" class=\"courseDescr btn btn-info\">查看</button></td>\r\n';
		
		if(c.content == null) c.content = ''; 
		tDom += '<td>\r\n';
		tDom += '<button content=\"' + c.content + '\" class=\"editContent btn btn-warning\" cid=\"' +c.id + '\" id=\"editContent' + c.id 
		+ '\" >编辑内容</button>\r\n';
		tDom += '</td>\r\n';
		
		tDom += '<td>' + c.clickNum + '</td>\r\n';
		tDom += '<td>' + time2DateTimeStr(c.createTime) + '</td>\r\n';
		if(c.auditStatus == 1){
			tDom += '<td id=\"auditStatus' + c.id + '\">审核通过</td>\r\n';
		}
		else if(c.auditStatus == 2){
			tDom += '<td id=\"auditStatus' + c.id + '\">审核不通过</td>\r\n';
		}
		else{
			tDom += '<td id=\"auditStatus' + c.id + '\">未审核</td>\r\n';
		}
		
		tDom += '<td><button class=\"courseEdit btn btn-warning\" cid=\"' + c.id + '\">编辑</button></td>';
	
		tDom += '<td><audio src=\"' + c.radioLink + '\" controls=\"controls\">你的浏览器不支持audio</audio></td>\r\n';
		tDom += '</tr>\r\n';
		return tDom;
	}
	
	</script>
</body>
</html>